<script setup lang="ts">
import { getCurrentInstance, ref, toRaw } from "vue";
import { onLoad } from "@dcloudio/uni-app";

import TagItem from "./components/tag-item.vue";
import FormButton from "@/components/form/button.vue";
import PopupModal from "@/components/popup/modal.vue";

onLoad(() => {
  eventChannel = (
    getCurrentInstance()?.proxy as any
  ).getOpenerEventChannel() as UniApp.EventChannel;
  eventChannel.once("ev-tag-data", (resp) => {
    console.log("ev-tag-data", resp);
    tabIndex.value = resp.index;
    pickerList.value = resp.pickerList;
    languageList.value = resp.languageList;
    certificateList.value = resp.certificateList;
    tagList.value = resp.tagList;
  });
});

const tabIndex = ref(0);
const tabList = ["擅长语言", "证书/职称", "提供服务"];
const tabClick = (index: number) => {
  tabIndex.value = index;
};

const pickerList = ref<string[][]>([[], [], []]);
const pickerClick = (index: number, index2: number) => {
  if (index === -1) {
    //
  } else {
    pickerList.value[index].splice(index2, 1);
  }
};

const languageList = ref<string[][]>([[], []]);
const languageClick = (index: number, index2: number) => {
  if (index === -2) {
    // 删除自定义标签
    const [key] = languageList.value[1].splice(index2, 1);
    const _index = pickerList.value[0].indexOf(key);
    _index === -1 || pickerList.value[0].splice(_index, 1);
  } else if (index === -1) {
    // 添加自定义标签
    addTag((text) => {
      languageList.value[1].includes(text) || languageList.value[1].push(text);
    });
  } else {
    const key = languageList.value[index][index2];
    const _index = pickerList.value[0].indexOf(key);
    if (_index === -1) {
      pickerList.value[0].length < 3 && pickerList.value[0].push(key);
    } else {
      pickerList.value[0].splice(_index, 1);
    }
  }
};

const certificateList = ref<string[][]>([[], [], []]);
const certificateClick = (index: number, index2: number) => {
  if (index === -2) {
    // 删除自定义标签
    const [key] = certificateList.value[2].splice(index2, 1);
    const _index = pickerList.value[1].indexOf(key);
    _index === -1 || pickerList.value[1].splice(_index, 1);
  } else if (index === -1) {
    // 添加自定义标签
    addTag((text) => {
      certificateList.value[2].includes(text) ||
        certificateList.value[2].push(text);
    });
  } else {
    const key = certificateList.value[index][index2];
    const _index = pickerList.value[1].indexOf(key);
    if (_index === -1) {
      pickerList.value[1].length < 3 && pickerList.value[1].push(key);
    } else {
      pickerList.value[1].splice(_index, 1);
    }
  }
};

const tagList = ref<string[][]>([[], [], []]);
const tagClick = (index: number, index2: number) => {
  if (index === -2) {
    // 删除自定义标签
    const [key] = tagList.value[2].splice(index2, 1);
    const _index = pickerList.value[2].indexOf(key);
    _index === -1 || pickerList.value[2].splice(_index, 1);
  } else if (index === -1) {
    // 添加自定义标签
    addTag((text) => {
      tagList.value[2].includes(text) || tagList.value[2].push(text);
    });
  } else {
    const key = tagList.value[index][index2];
    const _index = pickerList.value[2].indexOf(key);
    if (_index === -1) {
      pickerList.value[2].length < 5 && pickerList.value[2].push(key);
    } else {
      pickerList.value[2].splice(_index, 1);
    }
  }
};

const saveClick = () => {
  eventChannel?.emit("ev-tag-edit", toRaw(pickerList.value));
};

const addValue = ref("");
const addTag = (callback: (text: string) => void) => {
  addValue.value = "";
  popupModal.value?.show({ title: "添加自定义" }, () => {
    const text = addValue.value.trim();
    text.length > 0 && callback(text);
  });
};

let eventChannel: UniApp.EventChannel | undefined = undefined;
const popupModal = ref<InstanceType<typeof PopupModal>>();
</script>

<template>
  <view class="tag-title">根据关键词，为您匹配更符合您的任务</view>
  <view class="tag-tab">
    <view class="tag-tab-wrapper">
      <view
        class="tag-tab-item"
        v-for="(i, d) of tabList"
        :key="d"
        @click="tabClick(d)"
      >
        <view class="tag-tab-bg" v-if="tabIndex === d"></view>
        <view
          class="tag-tab-text"
          :class="{ 'tag-tab-active': tabIndex === d }"
        >
          {{ i }}
        </view>
      </view>
    </view>
  </view>

  <swiper
    class="tag-swiper"
    :current="tabIndex"
    @change="(e) => (tabIndex = e.detail.current)"
  >
    <swiper-item>
      <scroll-view
        class="tag-data"
        scroll-y
        @scroll="listLoadMore = true"
        @scrolltolower="loadMoreList"
      >
        <template v-if="pickerList[0].length > 0">
          <view class="tag-data-select">
            已选：
            <view class="tag-data-select2">
              （{{ pickerList[0].length }}/3）
            </view>
          </view>
          <view class="tag-data-wrapper">
            <view
              class="tag-data-item"
              v-for="(i, d) of pickerList[0]"
              :key="d"
            >
              <TagItem
                :text="i"
                isActive
                showClose
                @close-click="pickerClick(0, d)"
              />
            </view>
          </view>
        </template>

        <view class="tag-data-title">
          请选择<view class="tag-data-desc">（至少选择一个标签）</view>
        </view>
        <view class="tag-data-wrapper">
          <view
            class="tag-data-item"
            v-for="(i, d) of languageList[0]"
            :key="d"
            @click="languageClick(0, d)"
          >
            <TagItem :text="i" :isActive="pickerList[0].includes(i)" border />
          </view>
        </view>

        <view class="tag-data-title">自定义</view>
        <view class="tag-data-wrapper">
          <view class="tag-data-add" @click="languageClick(-1)">
            <image
              class="tag-data-add2"
              src="@/package/my/static/guider-tag-add.png"
            />
            自定义标签
          </view>
          <view
            class="tag-data-item"
            v-for="(i, d) of languageList[1]"
            :key="d"
            @click="languageClick(1, d)"
          >
            <TagItem
              :text="i"
              :isActive="pickerList[0].includes(i)"
              border
              showClose
              @close-click="languageClick(-2, d)"
            />
          </view>
        </view>
      </scroll-view>
    </swiper-item>

    <swiper-item>
      <scroll-view
        class="tag-data"
        scroll-y
        @scroll="listLoadMore = true"
        @scrolltolower="loadMoreList"
      >
        <template v-if="pickerList[1].length > 0">
          <view class="tag-data-select">
            已选：
            <view class="tag-data-select2">
              （{{ pickerList[1].length }}/3）
            </view>
          </view>
          <view class="tag-data-wrapper">
            <view
              class="tag-data-item"
              v-for="(i, d) of pickerList[1]"
              :key="d"
            >
              <TagItem
                :text="i"
                isActive
                showClose
                @close-click="pickerClick(1, d)"
              />
            </view>
          </view>
        </template>

        <view class="tag-data-title">持有证书</view>
        <view class="tag-data-wrapper">
          <view
            class="tag-data-item"
            v-for="(i, d) of certificateList[0]"
            :key="d"
            @click="certificateClick(0, d)"
          >
            <TagItem :text="i" :isActive="pickerList[1].includes(i)" border />
          </view>
        </view>

        <view class="tag-data-title">持证级别</view>
        <view class="tag-data-wrapper">
          <view
            class="tag-data-item"
            v-for="(i, d) of certificateList[1]"
            :key="d"
            @click="certificateClick(1, d)"
          >
            <TagItem :text="i" :isActive="pickerList[1].includes(i)" border />
          </view>
        </view>

        <view class="tag-data-title">自定义</view>
        <view class="tag-data-wrapper">
          <view class="tag-data-add" @click="certificateClick(-1)">
            <image
              class="tag-data-add2"
              src="@/package/my/static/guider-tag-add.png"
            />
            自定义标签
          </view>
          <view
            class="tag-data-item"
            v-for="(i, d) of certificateList[2]"
            :key="d"
            @click="certificateClick(2, d)"
          >
            <TagItem
              :text="i"
              :isActive="pickerList[1].includes(i)"
              border
              showClose
              @close-click="certificateClick(-2, d)"
            />
          </view>
        </view>
      </scroll-view>
    </swiper-item>

    <swiper-item>
      <scroll-view
        class="tag-data"
        scroll-y
        @scroll="listLoadMore = true"
        @scrolltolower="loadMoreList"
      >
        <template v-if="pickerList[2].length > 0">
          <view class="tag-data-select">
            已选：
            <view class="tag-data-select2">
              （{{ pickerList[2].length }}/5）
            </view>
          </view>
          <view class="tag-data-wrapper">
            <view
              class="tag-data-item"
              v-for="(i, d) of pickerList[2]"
              :key="d"
            >
              <TagItem
                :text="i"
                isActive
                showClose
                @close-click="pickerClick(2, d)"
              />
            </view>
          </view>
        </template>

        <view class="tag-data-title">擅长带团</view>
        <view class="tag-data-wrapper">
          <view
            class="tag-data-item"
            v-for="(i, d) of tagList[0]"
            :key="d"
            @click="tagClick(0, d)"
          >
            <TagItem :text="i" :isActive="pickerList[2].includes(i)" border />
          </view>
        </view>

        <view class="tag-data-title">其他</view>
        <view class="tag-data-wrapper">
          <view
            class="tag-data-item"
            v-for="(i, d) of tagList[1]"
            :key="d"
            @click="tagClick(1, d)"
          >
            <TagItem :text="i" :isActive="pickerList[2].includes(i)" border />
          </view>
        </view>

        <view class="tag-data-title">自定义</view>
        <view class="tag-data-wrapper">
          <view class="tag-data-add" @click="tagClick(-1)">
            <image
              class="tag-data-add2"
              src="@/package/my/static/guider-tag-add.png"
            />
            自定义标签
          </view>
          <view
            class="tag-data-item"
            v-for="(i, d) of tagList[2]"
            :key="d"
            @click="tagClick(2, d)"
          >
            <TagItem
              :text="i"
              :isActive="pickerList[2].includes(i)"
              border
              showClose
              @close-click="tagClick(-2, d)"
            />
          </view>
        </view>
      </scroll-view>
    </swiper-item>
  </swiper>

  <view class="tag-btn">
    <view @click="saveClick">
      <FormButton>保存</FormButton>
    </view>
  </view>

  <PopupModal ref="popupModal">
    <view class="tag-add">
      <input
        class="tag-add-input"
        v-model="addValue"
        type="text"
        placeholder="最多定义7个字"
        maxlength="7"
      />
    </view>
  </PopupModal>
</template>

<style lang="scss">
page {
  padding-top: 30rpx;
  background-color: #ffffff;
}

.tag-title {
  padding-left: 30rpx;
  margin-bottom: 40rpx;
  font-size: 28rpx;
  color: #999999;
  line-height: 40rpx;
}

.tag-tab {
  display: flex;
  justify-content: center;
  margin-bottom: 40rpx;

  .tag-tab-wrapper {
    display: flex;
    align-items: center;
    border-radius: 10rpx;
    border: 2rpx solid #f1f1f1;
    background-color: #ffffff;
  }

  .tag-tab-item {
    position: relative;
    width: 212rpx;
  }

  .tag-tab-bg {
    position: absolute;
    left: -2rpx;
    top: -2rpx;
    right: -2rpx;
    bottom: -2rpx;
    border-radius: 10rpx;
    background-color: #ff7900;
  }

  .tag-tab-text {
    position: relative;
    font-size: 28rpx;
    color: #666666;
    line-height: 68rpx;
    text-align: center;
  }

  .tag-tab-active {
    color: #ffffff;
    font-weight: bold;
  }
}

.tag-swiper {
  height: calc(100vh - 342rpx - env(safe-area-inset-bottom));
}

.tag-data {
  height: 100%;

  .tag-data-select {
    display: flex;
    align-items: center;
    height: 40rpx;
    padding-left: 30rpx;
    margin-bottom: 20rpx;
    font-size: 28rpx;
    color: #666666;
    font-weight: bold;
  }

  .tag-data-select2 {
    font-size: 24rpx;
    color: #999999;
  }

  .tag-data-title {
    display: flex;
    align-items: center;
    height: 50rpx;
    padding-left: 30rpx;
    margin-bottom: 30rpx;
    font-size: 36rpx;
    color: #333333;
    font-weight: bold;
  }

  .tag-data-desc {
    margin-left: 10rpx;
    font-size: 24rpx;
    color: #999999;
  }

  .tag-data-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding-left: 30rpx;
    padding-bottom: 20rpx;
  }

  .tag-data-item,
  .tag-data-add {
    margin-right: 20rpx;
    margin-bottom: 20rpx;
  }

  .tag-data-add {
    display: flex;
    align-items: center;
    height: 56rpx;
    padding: 0 18rpx;
    font-size: 24rpx;
    color: #666666;
    border-radius: 10rpx;
    border: 2rpx dashed #cccccc;
  }

  .tag-data-add2 {
    width: 24rpx;
    height: 24rpx;
    margin-right: 10rpx;
  }
}

.tag-btn {
  height: 106rpx;
  padding: 14rpx 60rpx 0;
}

.tag-add {
  display: flex;
  align-items: center;
  height: 88rpx;
  padding: 0 30rpx;
  margin-top: 40rpx;
  margin-bottom: 60rpx;
  border-radius: 10rpx;
  border: 2rpx solid #eeeeee;

  .tag-add-input {
    flex-grow: 1;
    min-width: 0;
    font-size: 28rpx;
    color: #333333;
  }
}
</style>